import React, { useEffect, useState } from 'react'
import { Button, Space, Table, message, Popconfirm } from 'antd';
import '../components.css'
import CourseService from '../../services/CourseService'
import { Link } from 'react-router-dom';
import { DeleteOutlined, UpCircleOutlined } from '@ant-design/icons';

export default function CourseList(){

    const [course, setCourse] = useState([])

    const getAllCourse = () => {
      CourseService.getAllCourse().then((response) => {
          setCourse(response.data);
        }).catch(error => {
          console.log(error);
        })
      }

      useEffect(() => {
        getAllCourse();
      }, [])

      const deleteCourse = (e) => {
        console.log(e);
        message.success('Delete Success!');
        setTimeout(() => {
          CourseService.deleteCourse(e).then(response => {
            getAllCourse();
          }).catch(error => {
            console.log(error);
          })
        }, 500);
      }
    
      const cancel = (e) => {
        console.log(e);
        message.error('Delete Failed!');
      };

  //表格的所有的列的定义
  const columns = [
    {
      //标题
      title: 'Course Id',
      //数据的索引名称
      dataIndex: 'courseid',
      //数据的键值
      key: 'courseid',
      //内容的对其方式
      align: 'center',
    },
    {
      title: 'Course Name',
      dataIndex: 'coursename',
      key: 'coursename',
      align: 'center',
    },
    {
      title: 'Course DateTime',
      dataIndex: 'coursedatetime',
      key: 'coursedatetime',
      align: 'center',
    },
    {
      title: 'Course Introduce',
      dataIndex: 'courseintroduce',
      key: 'courseintroduce',
      align: 'center',
    },
    {
      title: 'Course Credit',
      key: 'coursecredit',
      dataIndex: 'coursecredit',
      align: 'center',
    },
    {
      title: 'Course Teacher',
      key: 'courseteacher',
      dataIndex: 'courseteacher',
      align: 'center',
        },
    {
        //操作列
        title: 'Actions',
        key: 'actions',
        align: 'center',
        render: (_, record) => (
          //定义一个空格
          <Space size="middle">
            <Button type='primary'  icon={<UpCircleOutlined />}>
              <Link to={"updatecourse/" + record.key} style={{ color: "white", paddingLeft: "9px" }}>Update</Link>
            </Button>
           
            <Popconfirm
            //定义一个确认删除的弹出消息框
              title="Are you sure to delete?"
              //点击确定按钮， 调用函数// deleteClass 
              onConfirm={() => deleteCourse(record.key)}
              //点击取消按钮， 调用cancel函数
  
              onCancel={cancel}
              okText="Yes"
              cancelText="No"
            >
              <Button type='danger' icon={<DeleteOutlined />}>Delete</Button>
            </Popconfirm>
          </Space>
        ),
      },
    ];
    const data = course.map((course) => {
      
        return {
          key: course.id,
          courseid: course.id,
          coursename: course.courseName,
          coursedatetime: course.courseDateTime,
          coursecredit: course.courseCredit,
          courseintroduce: course.courseIntroduce,
          courseteacher: course.courseTeacher,
        }
      })
    
      return (
        <div courseName='courselist'>
          <div courseName="title">List Course</div>
          <Table columns={columns} dataSource={data} bordered={true} />
        </div>
      )
}